<template>
	<view class="app-contanier">
		<view class="search">
			<u-search placeholder="搜索工号/姓名/表单编号" v-model="queryParams.keywords"></u-search>
		</view>
		<view class="con">
			<view class="currentList">
				<u-subsection :list="currentList" :current="current" @change="handleChangeSub"></u-subsection>
				
				<u-subsection v-if="current === 1" style="margin-top: 5px;" :list="items" :current="childCurrent" @change="onClickItem"></u-subsection>
			
			</view>
			<view class="applyList">
				<view class="applyItem" :class="item.status === '1' ? 'appending' : '' " v-for="(item,index) in list"
					:key='index'>
					<view class="title">
						{{item.title}}
						<view class="status">
							已通过
						</view>
					</view>
					<view class="item">
						申请人名称：{{item.empName}}
					</view>
					<view class="item">
						开始时间：{{item.startTime}}
					</view>
					<view class="item">
						结束时间：{{item.endTime}}
					</view>
					<view class="item">
						请假时数：{{item.total}}
					</view>
					<view class="item">
						请假原因：{{item.reason}}
					</view>
					<view class="item">
						详细说明：{{item.remark}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentList: ['待审核', '已审核'],
				 items: ['全部', '已批准', '已驳回','跳签'],
				 childCurrent:0,
				current: 0,
				queryParams: {
					keywords: ''
				},
				list: [{
						empName: '张三阿',
						total: 10,
						title: '请假申请',
						status: '1',
						startTime: '2015-05-02 05:00',
						endTime: '2015-05-02 15:00',
						reason: '其他',
						remark: '撒娇啊拉开觉得'
					},
					{
						empName: '张三阿',
						total: 10,
						title: '请假申请',
						status: '2',
						startTime: '2015-05-02 05:00',
						endTime: '2015-05-02 15:00',
						reason: '其他',
						remark: '撒娇啊拉开觉得'
					}
				],
			};
		},
		methods: {
			handleChangeSub(index) {
				this.current = index
			},
			onClickItem(index){
				this.childCurrent = index
				
			}
		}
	}
</script>

<style lang="scss">
	.app-contanier {

		background-color: #eaeaea;
		min-height: 100vh;
		box-sizing: border-box;

		.search {
			background-color: #fff;
			padding: 14px 6px;
		}

		.con {

			.currentList {
				background-color: #fff;
				padding: 6px;
			}
		}

		.applyList {
			.applyItem {
				background-color: #fff;
				padding: 12px;
				margin: 0 6px;
				margin-top: 8px;
				font-size: 15px;
				border-left: 5px solid #78fa78;
				border-radius: 4px;

				.title {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.status {
						color: #ccc;
					}
				}
			}

			.appending {
				border-left: 5px solid orange !important;
			}

			.applyItem+.applyItem {}

		}
	}
</style>